<template>
	<div class="shopcart-container">
		<div v-if="cartList.length==0">
			<van-image :src="require('@/assets/images/shopcart_empty.png')" width="100%"></van-image>
		</div>
		<div v-else>
			<!-- 全选 清空  -->
			<div class="cart_header">
				<div class="cart_title">
					<!-- 全选 -->
					<van-checkbox checked-color="#000000" icon-size="18" v-model="isCheckedAll" @click="onSelectAll">全选
					</van-checkbox>
				</div>
				<div @click="onClickDeleteAll">
					<van-icon name="delete" />
					<span>清空</span>
				</div>
			</div>
			<!-- 商品列表区域 -->
			<div style="background-color: white;">
				<van-row v-for="(item, i) in cartList" :key="i" type="flex" align="center">
					<van-col span="2">
						<!-- 复选框 -->
						<van-checkbox v-model="item.is_checked" @change="onCheckedChange(item)" />
					</van-col>

					<van-col span="5">
						<!-- 中间商品图片 -->
						<van-icon size="80" :name="APIDomainName + item.pic"></van-icon>
					</van-col>

					<van-col span="17">
						<van-row class="van-multi-ellipsis--l2 title">{{ item.title }}</van-row>
						<van-row type="flex" align="center">
							<van-col span="8" class="price">¥{{ item.price }}</van-col>
							<van-col span="16" class="opration">
								<van-stepper v-model="item.count" @change="onCountChanged(item)" integer />
								<van-button text="删除" size="small" @click.prevent="onClickDeleteCartItem(item.id)" />
							</van-col>
						</van-row>
					</van-col>
				</van-row>
			</div>

			<!-- 商品结算区域 -->
			<van-cell title="商品结算" value="总计不含运费"></van-cell>
			<van-cell>
				<template #title>
					已勾选商品<span class="red">{{ getCheckedCount }}</span>
					件，总价
					<span class="red">¥{{ getCheckedAmount }}</span>
				</template>
			</van-cell>


			<!-- 结算按钮 待实现...-->
			<van-button type="primary" size="large" @click="onClickCreateOrder">去结算</van-button>
		</div>

	</div>

</template>

<script>
	//导入接口
	import {
		getCartListAPI, //获取列表
		updateCartCountAPI, //更新数量
		updateCartCheckedAPI, //更新是否勾选
		deleteCartItemAPI, //删除购物车项
		deleteCartAllAPI, //删除清空购物车接口		
		updateCartCheckedAllAPI, //全选/全不选购物车项接口				
	} from "@/api/cart.js";

	export default {
		name: "Shopcart",
		data() {
			return {
				cartList: [], //购物车列表
				isCheckedAll: false, //是否全选
			};
		},

		//实例的生命周期函数，实例创建后被调用
		created() {
			this.getCartData(); //初始化购物车数据
		},

		computed: {
			getCheckedCount() { //计算勾选记录总数			
				let sum = 0;
				this.cartList.forEach((item) => {
					if (item.is_checked) sum += 1;
				});
				return sum;
			},

			//计算是否全部勾选
			getCheckedAll() {
				return this.cartList.length == this.getCheckedCount ? true : false;
			},

			//统计购物车金额
			getCheckedAmount() {
				let amount = 0;
				this.cartList.forEach((item) => {
					if (item.is_checked) amount += item.price * item.count;
				});
				return amount;
			},

		},

		methods: {
			//获取用户购物车数据			
			getCartData() {
				this.cartList = []; //清空			
				getCartListAPI().then(result => {
					this.cartList = result.data;
					this.isCheckedAll = this.getCheckedAll; //同步是否全选
				}).catch(() => {});
			},

			//触发更改购物商品选中状态
			onCheckedChange(item) {
				let id = item.id;
				let is_checked = item.is_checked == true ? 1 : 0;
				let params = {
					id,
					is_checked
				};
				updateCartCheckedAPI(params).then(() => {
					this.isCheckedAll = this.getCheckedAll; //同步是否全选
				}).catch(() => {});
			},

			//触发更改购物商品数量
			onCountChanged(item) {
				let params = {
					id: item.id,
					count: item.count
				};
				updateCartCountAPI(params).then(() => {});
			},

			//触发删除购物商品
			onClickDeleteCartItem(id) {
				let ids = id;
				deleteCartItemAPI(ids).then(() => {
					this.getCartData(); //刷新列表数据
				});
			},

			//触发全选/全不选			
			onSelectAll() {
				//准备参数
				let is_checked = this.isCheckedAll == true ? 1 : 0;
				//调用接口
				updateCartCheckedAllAPI(is_checked).then(() => {
					this.getCartData(); //刷新列表数据
				});
			},

			//触发清空			
			onClickDeleteAll() {
				this.$dialog.confirm({
					message: '客官，您确定清空购物车吗?'
				}).then(() => {
					deleteCartAllAPI().then(() => {
						this.getCartData(); //刷新列表数据  
					});
				})
			},

			//触发创建订单			
			onClickCreateOrder() {
				if (this.cartList.length === 0) {
					this.$toast("您的购物车为空");
					return;
				}
				
				//this.$toast("这个路由功能还没实现...");						
				this.$router.push({
					name: "orderCreate"  
				});
			},
		}
	}
</script>

<style lang="less" scoped="scoped">
	.shopcart-container {
		padding: 0px 10px;

		.cart_header {
			padding: 10px;
			margin: 10px 0;
			height: 20px;
			background-color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.title {
		padding: 5px 5px;
		font-size: 14px;
		font-weight: bold;
		line-height: 20px;
	}

	.price {
		padding-left: 10px;
		text-align: left;
		font-size: 16px;
		font-weight: bold;
		color: red;
		display: flex;
		align-items: center;
	}

	.opration {
		padding-right: 10px;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.red {
		color: red;
		font-weight: bold;
		font-size: 16px;
	}
</style>
